<template>
  <div>
    <h1>app.vue</h1>
    <button @click="show=false">关闭子组件</button>
    <button @click="msg = 'hello：' + Math.random() ">修改msg</button>
    <p id="p">{{ msg }}</p>


    <son v-if="show"/>
  </div>
</template>

<script>
import son from './components/son'
export default {
  components: {
    son
  },
  data() {
    return {
      msg: '你好',
      show: true
    };
  },

  beforeCreate () {
    // 特点：最早的钩子，但还是还访问不到数据
    console.log('beforeCreate', this.msg) // undefined
  },

  created () {

    // 特点：第二早额钩子，但是可以访问数据，换句话说就是最早能访问到数据的钩子
    console.log('created', this.msg) // 你好
  },

  beforeMount () {
    // 渲染前，访问不到dom
    
    console.log('beforeMount', document.querySelector('#p')) // null
  },

  mounted () {
    // 渲染后，这是最早能访问到dom的钩子
    console.log('mounted',  document.querySelector('#p')) // 得到p标签
  },

  beforeUpdate () {
      // 更新前的钩子
      // 特点：在这个钩子里数据已经改变了，但是dom还没更新
      // 获取到p标签
      let p = document.querySelector('#p')
      console.log('beforeUpdate', this.msg, p.innerHTML)
  },

  updated () {
    // 更新后的钩子
    // 特点：在这个钩子里数据已经改变了，而且DOM也更新了
    let p = document.querySelector('#p')
    console.log('updated',  this.msg, p.innerHTML)
  }
}
</script>

<style>

</style>